<style lang="less" scope>
@import "../assets/css/config.less";
* {
  margin: 0;
  padding: 0;
  font-family: '微软雅黑', sans-serif;
}
#projects-container {
  height: 100vh;
  padding-top: 58px;
  min-width: 1210px;

  .row {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
  }
  
  .myheader{
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 10;
  }
  .body {
    height: 100%;
    padding: 1.875rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: default;
    .main-area {
      width: 62.5rem;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      .no-project {
        margin: 2rem;
        width: 100%;
        font-size: 16px;
        text-align: center;
      }

      .add-project-btn {
        font-size: 14px;
        padding: 6px 15px;
        border: 2px solid @color1;
        border-radius: 4px;
        color: #fff;
        outline: none;
        background-color: @color1;
        &:hover{
          background-color: @color2;
          color: @white;
        }
      }
      .card {
        height: 3.75rem;
        width: 100%;
        line-height: 3.75rem;
        padding: 0 20px;
        margin-top: 1.25rem;
        border: 1px solid #EBEEF5;
        text-align: left;
        font-size: 1rem;
        border-radius: 6px;
        display: flex;
        &:hover {
          box-shadow: 0 0 10px 0px rgb(226, 225, 225), 0 0 3px 0 rgb(226, 225, 225);
        }
        .del-project {
          color: red;
          margin-left: .9375rem;
        }
      }

    }
  }
  .masker {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 100;
    .create-project-area {
      background-color: #fff;
      width: 45rem;
      margin: 5rem auto;
      padding: 3.75rem 30px 1.875rem;
      border-radius: .375rem;
      text-align: left;
      p {
        font-size: 1rem;
        font-weight: 600;
        margin-right: .6rem;
      }
      input {
        line-height: 2rem;
        outline: none;
        border-radius: .375rem;
        padding: 0 .625rem;
        border: @border;
        border-width: 2px;
        flex: 1;
        &:focus {
          border-color: @color2;
          border-width: 2px;
        }
      }

      .button {
        font-size: 14px;
        padding: 0 15px;
        line-height: 2rem;
        margin-left: 1rem;
        border: 2px solid @color1;
        border-radius: 4px;
        color: #fff;
        outline: none;
        background-color: @color1;
        &:hover{
          background-color: @color2;
          color: @white;
        }
      }

      .step-item {
        font-size: 1rem;
        margin-left: 1.25rem;
        .delete {
          color: @color1;
          cursor: pointer;
          margin-left: .9375rem;
        }
      }
      .buttons {
        display: flex;
        justify-content: flex-end;
        margin-top: 3rem;
      }

      .icon {
        color: @color1;
      }

      .el-dropdown-link {
        cursor: pointer;
        color: @color1;
      }
      .el-icon-arrow-down {
        font-size: 12px;
      }
      .demonstration {
        display: block;
        color: #8492a6;
        font-size: 14px;
        margin-bottom: 20px;
      }
    }
  }
}
</style>
<template>
  <div id="projects-container">
    <div class="myheader">
      <myheader></myheader>
    </div>
    <div class="body">
      <div class="main-area">
        <button class="add-project-btn" @click="showAddProject">创建项目</button>
        <div v-if="projectList.length===0" class="no-project">暂时没有项目哦~</div>
        <div class="card" v-for="(item, index) in projectList" :key="item._id" @click="handleClick(item._id)">
          <div style="margin-right: auto">{{item.project_name}}</div>
          <a @click.stop="modifyProject(index)">编辑</a>
          <a class="del-project" @click.stop="deleteProject(item._id)">删除</a>
        </div>
      </div>
    </div>

    <div class="masker" v-if="showAddProjectFlag">
      <div class="create-project-area">
        <div class="row">
          <p>项目名称：</p>
          <input type="text" placeholder="请输入项目名称" v-model="projectName">
        </div>
        <div class="row">
          <p>项目类型：</p>
          <el-dropdown trigger="click" @command="chooseType">
            <span class="el-dropdown-link">
              {{type}}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="(item, index) in typeList" :key="index" :command="index">{{item}}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="row">
          <p>项目难度：</p>
          <el-dropdown trigger="click" @command="chooseDifficult">
            <span class="el-dropdown-link">
              {{difficult}}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="(item, index) in difficultList" :key="index" :command="index">{{item}}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="row">
          <p>项目步骤：</p>
          <input type="text" placeholder="请输入步骤名称" v-model="projectStep">
          <button class="button" @click="addStep">添加</button>
        </div>
        <div>
          <div class="step-item" v-for="(item, index) in stepList" :key="index">
            <icon class="el-icon-success icon"/>
            {{item}}
            <span class="delete" @click="deleteStep(index)">删除</span>
          </div>
        </div>
        <div class="buttons">
          <button class="cancel" @click="cancelAddProject">取消</button>
          <button class="confirm" style="margin-left: 15px" @click="confirm">确认</button>
        </div>
        
      </div>
    </div>
   </div>
</template>

<script>
import myheader from '../components/header.vue'
import {add_project, get_all_projects, modify_project, delete_project, get_projectById} from '../api/api'

export default {
  name: 'projects',
  data() {
    return {
      projectName: '',
      projectStep: '',
      stepList: [],
      showAddProjectFlag: false,
      difficult: '选择难度',
      difficultList: [
        '基础',
        '提高'
      ],
      currentDifficult: -1,
      type: '选择类型',
      typeList: [
        '小程序',
        'Web开发'
      ],
      currentType: -1,
      projectList: [],
      modifyId: '', // '' 添加， 否则 修改
    }
  },
  components: {
    myheader
  },
  created() {
    this.getProjectList();
  },
  methods: {
    getProjectList() {
      get_all_projects().then(res => {
        if(res.state) {
          this.projectList = res.data;
        } else {
          this.$message.error(res.msg)
        }
      }).catch(err => {
        console.error('获取项目列表：'+err)
      })
    },
    modifyProject(index) {
      get_projectById({
        id: this.projectList[index]._id
      }).then(res => {
        if(res.state) {
          this.projectName = res.data[0].project_name;
          
          this.type = res.data[0].project_type;
          this.currentType = this.typeList.indexOf(this.type);

          this.currentDifficult =  res.data[0].difficult;
          this.difficult = this.difficultList[this.currentDifficult];
          this.stepList = res.data[0].processes;
          this.showAddProjectFlag = true;
          this.modifyId = res.data[0]._id;
        } else {
          this.$message.error('获取项目信息失败');
        }
      }).catch(err => {
        this.$message.error('获取项目信息出错');
        console.error('获取项目信息出错:' + err);
      })
    },
    deleteProject(id) {
      this.$confirm('此操作将永久删除该项目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        showClose: false,
        cancelButtonClass: 'element_cancel-button',
        confirmButtonClass: 'element_confirm-button'
      }).then(() => {
        delete_project({id}).then(res => {
          if(res.state) {
            this.$message.success('删除项目成功');
            this.getProjectList();
          } else {
            this.$message.error(res.msg);
          }
        }).catch(err => {
          this.$message.error('删除项目出错')
          console.error('删除项目出错：' + err)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    },
    deleteStep(index) {
      this.$confirm('确认删除该步骤?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        showClose: false,
        cancelButtonClass: 'element_cancel-button',
        confirmButtonClass: 'element_confirm-button'
      }).then(() => {
        this.stepList.splice(index, 1);
        this.$message.success('删除项目成功');
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    },
    confirm() {
      if(!this.projectName.trim()) {
        this.$message.error('项目名称不能为空')
        return
      }
      if(this.currentType === -1){
        this.$message.error('请选择项目类型')
        return
      }
      if(this.currentDifficult === -1){
        this.$message.error('请选择项目难度')
        return
      }
      if(!this.stepList.length){
        this.$message.error('请添加项目步骤')
        return
      }
      var json = {
        name: this.projectName,  //项目名称
        type: this.typeList[this.currentType],  //项目类型
        difficult: this.currentDifficult,  //项目难度
        processes: this.stepList  //项目包含的步骤名称
      }
      if(this.modifyId) {
        json.id = this.modifyId;
        modify_project(json).then(res => {
          if(res.state) {
            this.$message.success("更新项目成功");
            this.projectName = '';
            this.currentType = -1;
            this.currentDifficult = -1;
            this.difficult = '选择难度';
            this.type = '选择类型';
            this.stepList = [];
            this.showAddProjectFlag = false;
            this.getProjectList();
          } else {
            this.$message.error(res.msg)
          }
        }).catch(err => {
          console.error('修改项目出错：' + err)
        })
      } else {
        add_project(json).then(res => {
          if(res.state) {
            this.$message.success('新建项目成功')
            this.projectName = '';
            this.currentType = -1;
            this.currentDifficult = -1;
            this.difficult = '选择难度';
            this.type = '选择类型';
            this.stepList = [];
            this.showAddProjectFlag = false;
            this.getProjectList();
          } else {
            this.$message.error('新建项目失败')
          }
        }).catch(err => {
          console.error('项目列表页：' + err)
        })
      }
    },
    chooseType(data) {
      this.type = this.typeList[data];
      this.currentType = data
    },
    chooseDifficult(data) {
      this.difficult = this.difficultList[data];
      this.currentDifficult = data
    },
    cancelAddProject() {
      this.showAddProjectFlag = false;
      this.modifyId = '';

      this.projectName = '';
      this.currentType = -1;
      this.currentDifficult = -1;
      this.difficult = '选择难度';
      this.type = '选择类型';
      this.stepList = [];
      this.showAddProjectFlag = false;
    },
    showAddProject() {
      this.showAddProjectFlag = true;
    },
    handleClick(id) {
      this.$router.push({
        name: "project",
        params: {
          menu: id + ",0,0"
        }
      });
    },
    addStep() {
      if(!this.projectStep.trim()) {
        this.$message.error("步骤名称不能为空")
      }
      this.stepList.push(this.projectStep);
      this.projectStep = '';
    }
  }
}
</script>